<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html" 
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
    <f:view>
        <h:head>
            <title>Html5 Support</title>
        </h:head>
        <h:body>
            <h1> Html5 Support</h1>
           
            <h:form>
                 <h:messages showDetail="false" showSummary="true"/>
                Text: <h:inputText id="text" value="#{html5Bean.text}" required="true">  
                    <f:passThroughAttribute name="placeholder" value="Type text here..."/>
                    <f:passThroughAttribute name="required" value="true"/>
                </h:inputText>
                <br/>
                Url: <h:inputText id="url" value="#{html5Bean.url}">
                    <f:passThroughAttribute name="type" value="url"/>
                </h:inputText><br/>
                Email: <h:inputText id="email" p:type="email" value="#{html5Bean.email}" /><br/>
                Number: <h:inputText id="number" p:type="number" p:min="1" p:max="10"  value="#{html5Bean.number}" >
                    <f:convertNumber minFractionDigits="0"/>
                </h:inputText> <br/>
                Range: <h:inputText id="range" value="#{html5Bean.range}">
                    <!-- f:passThroughAttributes value="#{html5Bean.attrs}"/ -->
                    <f:passThroughAttributes value="#{{'type':'range', 'min':'0', 'max':'10', 'step':'2'}}"/>
                    <f:convertNumber minFractionDigits="0"/>
                </h:inputText><br/>

                Date: <h:inputText id="date" p:type="date" value="#{html5Bean.date}" >
                    <f:convertDateTime pattern="yyyy-MM-dd"/>
                </h:inputText><br/>
                <h:commandButton value="Save" action="#{html5Bean.submit()}">
                    <f:ajax execute="@form" render="@all"/>
                </h:commandButton>
            </h:form>

            <h:panelGroup id="out">
                Text:  <h:outputText value="#{html5Bean.text}"/><br/>
                Url:  <h:outputText value="#{html5Bean.url}"/><br/>
                Email:  <h:outputText value="#{html5Bean.email}"/><br/>
                Number:  <h:outputText value="#{html5Bean.number}"/><br/>
                Range:  <h:outputText value="#{html5Bean.range}"/><br/>
                Date:  <h:outputText value="#{html5Bean.date}"/><br/>
            </h:panelGroup>
        </h:body>
    </f:view>
</html>
